<template>
	<view class="container">
		<!-- 左侧固定不限时间选项 -->
		<view class="fixed-section left">
			<view class="option-btn" :class="{ active: !selectedDate }" @click="handleNoLimit">
				<text>不限时间</text>
			</view>
		</view>

		<!-- 中间滑动日期区域 -->
		<scroll-view scroll-x class="scroll-area" @scroll="handleScroll">
			<view class="date-wrapper">
				<view v-for="(date, index) in dateList" :key="date.timestamp" class="date-item"
					:class="{ active: isSelected(date) }" @click="selectDate(date)">
					<text class="day">{{ date.month }}/{{ date.day }}</text>
					<text class="week">{{ date.week }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 右侧固定日历图标 -->
		<view class="fixed-section right">
			<image src="../../static/server_select_icon.png" class="calendar-icon" @click="openDatePicker" />
		</view>

		<!-- 日期选择器弹窗 -->
		<uni-popup ref="datePopup" type="bottom">
			<view class="date-picker-box">
				<uni-datetime-picker type="date" v-model="selectedDate" @change="dateChange" />
				<button @click="confirmDate">确定</button>
			</view>
		</uni-popup>


		<view class="doctor-detail">
			<view class="doctor-header">
				<!-- 高血压下拉框 -->
				<view class="dropdown" @click="toggleDropdown('hypertension')">
					<text class="dropdown-text">{{hypertensionValue || '选择类型'}}</text>
					<text class="dropdown-arrow">▼</text>
					<view class="dropdown-menu" v-if="activeDropdown === 'hypertension'">
						<view v-for="item in hypertensionOptions" @click.stop="selectItem('hypertension', item)">
							{{item}}
						</view>
					</view>
				</view>

				<!-- 区域下拉框 -->
				<view class="dropdown" @click="toggleDropdown('yanta')">
					<text class="dropdown-text">{{yantaValue || '选择区域'}}</text>
					<text class="dropdown-arrow">▼</text>
					<view class="dropdown-menu" v-if="activeDropdown === 'yanta'">
						<view v-for="item in yantaOptions" @click.stop="selectItem('yanta', item)">
							{{item}}
						</view>
					</view>
				</view>

				<!-- <view class="filter">疗效好</view> -->
			</view>

			<view class="doctor-list">
				<!-- 医生列表，根据图片布局生成 -->
				<view class="doctor-item" v-for="(item, index) in selectedData" :key="index">
					<!-- 注意：图片中未提供医生照片，故此处省略<image>标签 -->
					<view class="doctor-info">
						<image
							src="https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M"
							class="avatar"></image>
						<view class="doctor-text">
							<text class="doctor-name">{{ item.doctorName }}</text>
							<text class="doctor-title">{{item.doctorJob}} {{item.doctorType}}</text>
						</view>
						<text class="right-arrow" @click="followUpImmediately"></text>
					</view>
					<view class="doctor-detail-row">
						<view class="doctor-specialty">
							<view class="specialty-item">
								<text class="be-good">{{item.beGood}}</text>
							</view>
						</view>
						<view class="doctor-buttons">
							<button class="appointment-button">预约￥{{item.price}}</button>
							<button class="revisit-button" @click="followUpImmediately">立即复诊</button>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const WEEK_DAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			days: {
				type: Number,
				default: 100
			}
		},
		data() {
			return {
				dateList: [],
				selectedDate: null,
				scrollLeft: 0,
				selectedData: [],
				activeDropdown: null,
				hypertensionValue: '',
				yantaValue: '',
				hypertensionOptions: ['高血压一级', '高血压二级', '高血压三级'],
				yantaOptions: ['雁塔区', '碑林区', '新城区', '莲湖区'],
				selectedTimestamp: null,
			}
		},
		computed: {
			currentDate() {
				return this.selectedDate || this.getToday()
			}
		},
		created() {
			this.initDates()
			this.selectedDate = this.value
			this.fetchDataForDate()
		},
		methods: {
			toggleDropdown(type) {
				this.activeDropdown = this.activeDropdown === type ? null : type
			},
			selectItem(type, value) {
				this[`${type}Value`] = value
				this.activeDropdown = null
				if (type == 'hypertension') {
					this.hypertensionValue = value
				} else {
					this.yantaValue = value
				}
			},
			dateChange(e) {
				this.selectedDate = this.formatDateTime(new Date(e));
				this.fetchDataForDate(this.selectedDate)
			},
			formatDateTime(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month}-${day}`;

			},
			formatDate(date) {
				return {
					dateStr: `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`,
					month: date.getMonth() + 1,
					day: date.getDate(),
					week: WEEK_DAYS[date.getDay()],
					timestamp: date.getTime()
				}
			},
			openDatePicker() {
				this.$refs.datePopup.open()

			},
			confirmDate() {
				this.$refs.datePopup.close()
			},
			initDates() {
				const today = new Date()
				this.dateList = Array.from({
					length: this.days
				}, (_, i) => {
					const date = new Date(today)
					date.setDate(today.getDate() + i)
					return this.formatDate(date)
				})
			},

			getToday() {
				const today = new Date()
				return `${today.getFullYear()}-${today.getMonth()+1}-${today.getDate()}`
			},
			handleNoLimit() {
				this.selectedDate = null
				this.$emit('input', null)
				this.$emit('change', null)
			},
			selectDate(date) {
				this.selectedDate = date.dateStr
				this.$emit('input', date.dateStr)
				this.$emit('change', date.dateStr)
				this.fetchDataForDate(this.selectedDate)
			},
			isSelected(date) {
				return this.selectedDate === date.dateStr
			},
			handleScroll(e) {
				this.scrollLeft = e.detail.scrollLeft
			},
			followUpImmediately() {
				uni.navigateTo({
					url: '/chronicDisease/pages/my/doctorhomepage'
				});
			},
			fetchDataForDate(date) {
			
			}
		}
	}
</script>

<style>
	/* 	.container {
		display: flex;
		height: 120rpx;
		position: relative;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	} */
	.container {
		background-color: #f7f7f7;
		height: 120rpx;
		position: relative;
	}

	.fixed-section {
		width: 120rpx;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		background: inherit;
	}

	.fixed-section.left {
		left: 0;
		border-right: 1rpx solid #f0f0f0;
	}

	.fixed-section.right {
		right: 0;
		border-left: 1rpx solid #f0f0f0;
	}

	.option-btn {
		width: 100rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		background: #f7f7f7;
		font-size: 24rpx;
		color: #666;
	}

	.option-btn.active {
		background: #2979ff;
		color: #fff;
	}

	.scroll-area {
		flex: 1;
		margin: 0 120rpx;
		height: 100%;
	}

	.date-wrapper {
		display: inline-flex;
		height: 100%;
		padding: 0 20rpx;
	}

	.date-item {
		width: 100rpx;
		height: 100rpx;
		margin: 0 10rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.date-item .month {
		font-size: 20rpx;
		color: #999;
	}

	.date-item .day {
		font-size: 26rpx;
		margin: 4rpx 0;
	}

	.date-item .week {
		font-size: 20rpx;
		color: #999;
	}

	.date-item.active .month,
	.date-item.active .week {
		color: #fff;
	}

	.date-item.active .day {
		color: #fff;
	}

	.date-item.active {
		background: #2979ff;
		border-radius: 8rpx;
	}

	.calendar-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.doctor-detail {
		display: flex;
		flex-direction: column;
		margin-top: 30px;
	}

	.doctor-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.dropdown {
		width: 250rpx;
		position: relative;
		margin-right: 12px;
		padding: 6px 12px;

		display: flex;
		align-items: center;
	}

	.dropdown-arrow {
		margin-left: 5px;
		font-size: 12px;
	}

	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		z-index: 100;
	}

	.dropdown-menu view {
		padding: 8px 12px;
		border-bottom: 1px solid #f5f5f5;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 60px;
		border: 3px solid #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.doctor-info {
		display: flex;
		align-items: flex-start;
	}

	.doctor-text {
		display: flex;
		flex-direction: column;
		margin-left: 30px;
	}

	.be-good {
		font-size: 14px;
	}

	.doctor-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 4px;
		margin-bottom: 12px;
	}

	.doctor-title {
		font-size: 14px;
		color: #666;
	}

	.doctor-buttons {
		display: flex;
		flex-direction: column;
		gap: 8px;
		position: relative;
		bottom: 40px;


	}

	.appointment-button,
	.revisit-button {
		padding: 5px 10px;
		font-size: 12px;
		border-radius: 4px;
		color: #44cece;
		background-color: #f0f077;
		font-weight: bold;
	}

	.right-arrow {
		margin-left: 150px;
		color: #999;
		font-size: 26px;
		font-weight: bold;
	}

	.doctor-item {
		margin-bottom: 20px;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
	}

	.doctor-detail-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 12px;
	}

	.doctor-specialty {
		flex: 1;
		margin-right: 15px;
	}

	.specialty-item {
		width: 100%;
		padding: 10rpx;
	}

	.be-good {
		display: inline-block;
		max-width: 100%;
		word-break: break-all;
		white-space: normal;
		font-size: 28rpx;
		line-height: 1.5;
	}
</style>